CCS实现带下拉列表的导航栏 |
您所在的位置：网站首页 › html 下拉列表 › CCS实现带下拉列表的导航栏 |
CCS实现带下拉列表的导航栏
|
1 前言
初学CSS，运用无序列表、div标签和选择器实现一个简易的具有下拉列表的导航栏，我找来了AMD官网的导航栏作为模板，对它进行简单的复刻： 由于下拉菜单的分类太多，工作量较大，所以就对"处理器"实现下拉，对该目录下的"台式机"实现侧边展开，如上图所示：首先要做的就是把所有文本信息创建好，方便起见将所有链接处都用#代替，同时还需要随便找个AMD的logo，具体代码如下所示： 导航栏示例 处理器▾ 台式机 消费类处理器: 锐龙 THREADRIPPER 锐龙 锐龙搭载显卡 速龙搭载显卡 商业用户: 锐龙 PRO 速龙 PRO AMD PRO 技术 商用电脑 笔记本电脑 工作站 服务器 嵌入式解决方案 半定制 产品规格 技术 显卡▾ 游戏▾ 企业解决方案▾ 购买▾ 驱动与支持 行业解决方案▾ AMD at Chinajoy 2021 极速制胜 制霸游戏 具体内容 复制代码网页中的显示效果如下： 代码中主体是一个无序列表，处理器的下拉列表嵌套了一个无序列表（理论上这边直接用div+a的形式嵌套应该也是没问题的），台式机的侧拉列表嵌套了一个div+a。两种方法都用一遍，对于加深理解还是很有好处滴~ 2.2 下拉列表设置核心思路是通过:hover选择器来决定是否显示这两个下拉列表，具体代码如下： 导航栏示例 .navigation>li { display: inline-block; position: relative; } .list_down { display: none; /*通过hover选择器来显示菜单，此处默认为隐藏*/ position: absolute; /*使得下拉列表向下覆盖*/ list-style-type: none; /*取消ul的样式*/ padding: 0; /*取消ul的padding*/ } .list_down li { display: block; } .list_right { display: none; /*通过hover选择器来显示菜单，此处默认为隐藏*/ position: absolute; } .list_right a { display: block; } .list_down .button2:hover .list_right { display: inline-block; /*使得侧拉列表显示在台式机的右边,方便演示，后续会改成block*/ } .navigation .button1:hover .list_down { display: block; /*显示下拉菜单*/ } 处理器▾ 台式机 消费类处理器: 锐龙 THREADRIPPER 锐龙 锐龙搭载显卡 速龙搭载显卡 商业用户: 锐龙 PRO 速龙 PRO AMD PRO 技术 商用电脑 笔记本电脑 工作站 服务器 嵌入式解决方案 半定制 产品规格 技术 显卡 游戏 企业解决方案 购买 驱动与支持 行业解决方案 AMD at Chinajoy 2021 极速制胜 制霸游戏 具体内容 复制代码网页中的显示效果如下，可以看到核心功能已经实现，还差亿点点美化~ 根据模板再对页面做亿点点的美化： 导航栏示例 * { padding: 0; margin: 0; } .navigation { background-color: black; /*导航栏的背景色*/ } .navigation>li { display: inline-block; position: relative; padding: 10px; vertical-align: middle; /*使得导航栏中的列表居中显示*/ } .navigation>li>a { text-decoration: none; color: white; padding: 15px; } .navigation>li:hover { background-color: rgba(255, 255, 255, 0.9); /*鼠标悬停变色*/ } .navigation>li:hover>a { color: black; /*鼠标悬停变色*/ } .logo { display: block; } .list_down { display: none; /*通过hover选择器来显示菜单，此处默认为隐藏*/ position: absolute; /*使得下拉列表向下覆盖*/ list-style-type: none; /*取消ul的样式*/ margin-top: 10px; margin-left: -10px; width: 150px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /*添加阴影*/ } .list_down li { display: block; background-color: rgba(255, 255, 255, 0.9) } .list_down li:hover { background-color: black; /*鼠标悬停变色*/ } .list_down li:hover>a { color: white; /*鼠标悬停变色*/ } .list_right { display: none; /*通过hover选择器来显示菜单，此处默认为隐藏*/ position: absolute; margin-left: 150px; margin-top: -51px; background-color: rgba(255, 255, 255, 0.9); width: 200px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); /*添加阴影*/ } .list_right a, .list_down li a { display: block; text-decoration: none; color: black; padding: 15px; } .list_right a:hover { background-color: black; color: white; /*鼠标悬停变色*/ } .list_down .button2:hover .list_right { display: block; } .navigation .button1:hover .list_down { display: block; /*显示下拉菜单*/ } .text { margin: 20px; /*文本*/ } 处理器 台式机 消费类处理器: 锐龙 THREADRIPPER 锐龙 锐龙搭载显卡 速龙搭载显卡 商业用户: 锐龙 PRO 速龙 PRO AMD PRO 技术 商用电脑 笔记本电脑 工作站 服务器 嵌入式解决方案 半定制 产品规格 技术 显卡 游戏 企业解决方案 购买 驱动与支持 行业解决方案 AMD at Chinajoy 2021 极速制胜 制霸游戏 具体内容 复制代码最终效果就是这样，还是挺像的~ AMD YES! |
【本文地址】
今日新闻 |
推荐新闻 |